<template>
  <!-- 经费支出填报基本信息 -->
  <el-container class="u-cctb-jbxx-form">
    <div style="width:100%">
      <u-busi-item title="基本信息"
        icon="jbxx">
        <u-form :elements="elements" 
          v-bind="$attrs" 
          :model="value" 
          @focus="focusinput">
          <!-- 往返地点 -->
          <template slot="wfdd">
            <el-row>
              <p style="line-height: 20px;color: #606266;font-weight: 600; ">往返地点</p>
              <el-col :span="12">
                <u-cascader v-model="value['fkareaidstart']" :data="regionData" />
              </el-col>
              <el-col :span="12">
                <u-cascader v-model="value['fkareaidend']" :data="regionData" />
              </el-col>
            </el-row>
           </template>
        </u-form>
      </u-busi-item>
    </div>

    <!-- 人员弹窗 -->
    <cc-people :show="evectionUserShow" 
      @save="evectionSubmit" 
      @close="evectionUserShow = false" />

    <!-- 出差费用 -->
    <cc-fy-dialog   :show="ccfyDailogShow" @close="ccfyDailogShow = false"> </cc-fy-dialog>
  </el-container>
</template>
<script>
import ccfyDialogVue from './ccfyDialog.vue'
import ccPeople from './ccPeople.vue'
export default {
  components:{
    'cc-people':ccPeople,
    'cc-fy-dialog':ccfyDialogVue,
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props:{
    value: {},
    isCheck:{ type:Boolean, default: false,},
  },
  data () {
    return {
      evectionUserShow: false,
      ccfyDailogShow: false,

      cclxData:[],
      elements: [
        {element: 'text', label: '申请部门：', span: 8, key: 'redeptname'},
        {element: 'text', label: '申请人：', span: 8, key: 'fkusername'},
        {element: 'text', label: '申请人电话：', span: 8, key: 'tel',},
        {element: 'select', label: '出差类型：', span: 12, key: 'traveltype', data: [],},
        {element: 'input', label: '出差人员', span: 12, key: 'fkusername',},
        {element: 'input', label: '本次出差总人数', span: 12, key: '',},
        {element: 'select', label: '交通工具', span: 12, key: 'travelway',data:[]},
        {element: 'slot',  span: 12, key: 'wfdd', },
        {element: 'datepicker', type: 'daterange', label: '预计起止时间', span: 12, key: 'qzsj',},
        {element: 'money', label: '预计费用', span: 12, key: 'yjfy', append: '元'},
        {element: 'input', type: 'textarea', label: '出差事由', span: 12, key: 'ccsy',},
        {element: 'input', type: 'textarea', label: '备注',  span: 12, key: 'bzzz',},
      ],
  
      regionData:[],
    }
  },
  mounted() {},
  methods: {
    evectionSubmit(){
      this.$emit('update:model', { ...this.$attrs.model, bzzz: 'aaaaaaa' })
    },
    focusinput(val){
      if(val == 'ccry'){
        this.evectionUserShow = true
      }
      // 出差费用
      if(val === 'yjfy'){
        // this.ccfyDailogShow = true
      }
    }
  }
}
</script>
<style lang='scss'>
.u-cctb-jbxx-form{
  max-height: 54vh;
  overflow: auto;
.el-form-item__label{
  line-height: 20px;
}
.el-date-editor{
line-height: 32px !important;
height: 32px !important;
width: 100%;
}
.link{
  color: blue;
  line-height: 20px;
  cursor: pointer;
}
.cctb-widthtextaree{
  height: 180%;
}
}

</style>